<template>
    <div class="contarner-page">
        <div class="page_content ">
            <div class="home_content">
                <!-- <page-header index="'0'" @fetchMediaList="fetchMediaList" @goAdmin="goAdmin"
                    @showDialogVisible="showDialogVisible" @logOut="logOut" ref="languageRef"></page-header> -->
                <!-- 搜索 -->
                <div class="container">
                    <div class=" " :class="Reverse ? 'Reverse' : ''">
                        <!-- 规格 -->
                        <div class="search_box">
                            <div class="item flex_" style="margin-bottom:10px;">
                                <div class="flex_" style="margin-right: 10px;">
                                    <div class="tag_title">短剧名搜索</div>
                                </div>
                                <div class="content">
                                    <input v-model="searchTitle" type="text" class="search-input" placeholder="请输入关键词"
                                        @keyup.enter="search"
                                        style="width: 220px; height:32px; border-radius:8px; border:1px solid #447dff; padding:0 12px; font-size:15px;" />
                                    <button class="tag shou" style="margin-left:8px;" @click="search">搜索</button>
                                </div>
                            </div>
                            <div class="item flex_" style="margin-bottom:10px;">
                                <div class="flex_" style="margin-right: 10px;">
                                    <div class="tag_title">短剧id搜索</div>
                                </div>
                                <div class="content">
                                    <input v-model="shortplay_ids" type="text" class="search-input"
                                        placeholder="请输入短剧id" @keyup.enter="search"
                                        style="width: 220px; height:32px; border-radius:8px; border:1px solid #447dff; padding:0 12px; font-size:15px;" />
                                    <button class="tag shou" style="margin-left:8px;" @click="search">搜索</button>
                                </div>
                            </div>
                            <!-- 在搜索框区域的 Category 项目后面添加时间筛选项 -->
                            <!-- 将原来的时间筛选项替换为以下内容 -->
                            <div class="item flex_" style="margin-bottom:10px;">
                                <div class="flex_" style="margin-right: 10px;">
                                    <div class="tag_title">上线时间</div>
                                </div>
                                <div class="content date-picker-content">
                                    <el-date-picker v-model="selectedDate" type="date" placeholder="选择日期"
                                        format="yyyy-MM-dd" value-format="yyyy-MM-dd" @change="handleDateChange"
                                        :picker-options="pickerOptions" :clearable="true" size="small"
                                        class="custom-date-picker">
                                    </el-date-picker>
                                    <button class="tag shou date-clear-btn" v-if="selectedDate"
                                        @click="clearDateFilter">
                                        清空筛选
                                    </button>
                                </div>
                            </div>
                            <div class="item flex_" style="margin-bottom:10px;">
                                <div class="flex_" style="margin-right: 10px;">
                                    <div class="tag_title">Language</div>
                                </div>
                                <div class="content">
                                    <div class="tag shou" :class="{ change: selectedLang === item.code }"
                                        v-for="item in langList" :key="item.code" @click="changeLang(item.code)">
                                        {{ item.label }}
                                    </div>
                                </div>
                            </div>
                            <div class="loading-wrap" v-if="typeListLoading">
                                <div class="loader"></div>
                            </div>

                            <div class="item flex_" v-else>
                                <div class="flex_" style="margin-right: 10px;">
                                    <div class="tag_title">
                                        Category
                                    </div>
                                    <img src="@/assets/arrow.webp" class="img" alt="">
                                </div>
                                <div class="content">
                                    <!-- 全部按钮（可选） -->
                                    <div class="tag_all shou" :class="selectedTypeIds.length === 0 ? 'change' : ''"
                                        @click="changeTypeAll">
                                        All
                                    </div>
                                    <div class="tag shou" :class="selectedTypeIds.includes(item.id) ? 'change' : ''"
                                        @click="toggleType(item)" :key="item.id" v-for="(item, k) in typeList">
                                        {{ item.name }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 排序 -->
                        <!-- <div class="item flex_">
                        <div class="tag_title">排序</div>
                        <div class="tag_all shou" :class="sort == null ? 'change' : ''" @click="changeSortAll">默认</div>
                        <div class="tag shou" :class="sort == k ? 'change' : ''" @click="changeSort(item, k)" :key="k"
                            v-for="(item, k) in sortList">
                            {{ item }}
                        </div>
                    </div> -->
                    </div>
                    <el-tag closable class="el-tag " v-if="nickname" @close="closeTag">
                        by:{{ nickname }}
                    </el-tag>
                    <div class="success-box">
                        <div v-if="mediaListLoading" class="page-list-loading-mask">
                            <div class="loader"></div>
                        </div>
                        <!-- 修改成功列表的循环，使用 filteredList 替代 list -->
                        <div class="success-list" v-else>
                            <div class="media-card" :key="k" v-for="(item, k) in filteredList" @click="showMedia(item)">
                                <!-- 保持原有的卡片内容不变 -->
                                <div class="card-inner">
                                    <div class="media-poster">
                                        <img :src="item.cover_image" class="poster-img" alt="Preview" loading="lazy" />
                                        <div class="poster-overlay">
                                            <div class="play-icon">
                                                <i class="icon-play"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="media-info">
                                        <div class="media-title" :title="item.title">{{ item.title }}</div>
                                        <div class="media-meta">
                                            <span class="episode-count" v-if="item.total">{{ item.total }}集</span>
                                            <span class="first-date" v-if="item.first_online_time">
                                                {{ formatDate(item.first_online_time) }}
                                            </span>
                                            <span class="category-tags" v-if="item.category && item.category.length">
                                                <span class="category-tag" v-for="cat in item.category.slice(0, 2)"
                                                    :key="cat.id">
                                                    {{ cat.name.split('/')[0] }}
                                                </span>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 在空状态判断中也使用 filteredList -->
                        <div class="empty-state" v-if="!mediaListLoading && filteredList && filteredList.length === 0">
                            <div class="empty-icon"></div>
                            <div class="empty-title">暂无数据</div>
                            <div class="empty-desc">没有找到相关剧集，请更换筛选条件试试~</div>
                        </div>
                    </div>
                </div>
                <!-- <div class="modern-pagination" v-if="total > 0">
                    <div class="pagination-container">
                        <button class="pagination-btn prev-btn" :class="{ disabled: pageNo === 1 }"
                            @click="pageNo > 1 ? getPageNo(pageNo - 1) : null" :disabled="pageNo === 1">
                            <i class="arrow-left"></i>
                            <span class="btn-text">上一页</span>
                        </button>

                        <div class="page-numbers">
                            <button v-if="startNumAndEndNum.start > 1" class="page-btn"
                                :class="{ active: pageNo === 1 }" @click="getPageNo(1)">
                                1
                            </button>

                            <span v-if="startNumAndEndNum.start > 2" class="dots">···</span>

                            <button v-for="(page, index) in pagesArr" :key="index" class="page-btn"
                                :class="{ active: pageNo === page }" @click="getPageNo(page)">
                                {{ page }}
                            </button>

                            <span v-if="startNumAndEndNum.end < totalPage - 1" class="dots">···</span>

                            <button v-if="startNumAndEndNum.end < totalPage" class="page-btn"
                                :class="{ active: pageNo === totalPage }" @click="getPageNo(totalPage)">
                                {{ totalPage }}
                            </button>
                        </div>

                        <button class="pagination-btn next-btn" :class="{ disabled: pageNo === totalPage }"
                            @click="pageNo < totalPage ? getPageNo(pageNo + 1) : null" :disabled="pageNo === totalPage">
                            <span class="btn-text">下一页</span>
                            <i class="arrow-right"></i>
                        </button>

                        <div class="page-info">
                            共 {{ total }} 条，第 {{ pageNo }} / {{ totalPage }} 页
                        </div>
                    </div>
                </div> -->
            </div>
        </div>


        <el-dialog custom-class="modern-media-dialog" :visible.sync="dialogVisible1" :width="dialogWidth"
            :class="Reverse ? 'Reverse' : ''" :show-close="true" :close-on-click-modal="true" center>

            <!-- 关闭按钮 -->
            <div slot="title" class="dialog-header">
                <span class="dialog-title">剧集详情</span>
            </div>

            <div class="dialog-content">
                <!-- 海报区域 -->
                <div class="poster-section">
                    <div class="poster-container">
                        <img :src="form.cover_image" class="poster-image" alt="Preview" />
                        <div class="poster-badge" v-if="form.total">{{ form.total }}集</div>
                    </div>
                </div>

                <!-- 信息区域 -->
                <div class="info-section">
                    <!-- 标题 -->
                    <h2 class="media-title">{{ form.title }}</h2>

                    <!-- 分类标签 -->
                    <div class="category-section" v-if="form.category && form.category.length">
                        <div class="category-list">
                            <span v-for="cat in form.category" :key="cat.id" class="category-chip">
                                {{ cat.name.split('/')[0] }}
                            </span>
                        </div>
                    </div>

                    <!-- 剧情简介 -->
                    <div class="description-section" v-if="form.desc">
                        <h3 class="section-title">剧情简介</h3>
                        <div class="description-content" :class="{ expanded: descExpanded }">
                            <p class="description-text">{{ form.desc }}</p>
                            <div v-if="form.desc && form.desc.length > 120" class="expand-btn"
                                @click="descExpanded = !descExpanded">
                                {{ descExpanded ? '收起' : '展开' }}
                                <i :class="descExpanded ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
                            </div>
                        </div>
                    </div>

                    <!-- 其他信息 -->
                    <div class="meta-info" v-if="form.voice_lang || form.lang">
                        <div class="meta-item" v-if="form.shortplay_id">
                            <span class="meta-label">剧集ID:</span>
                            <div class="meta-value-with-copy">
                                <span class="meta-value shortplay-id-text">{{ form.shortplay_id }}</span>
                                <button class="copy-btn" @click="copyShortplayId" :disabled="copyLoading">
                                    <span class="copy-text">复制</span>
                                </button>
                            </div>
                        </div>
                        <div class="meta-item" v-if="form.voice_lang">
                            <span class="meta-label">配音:</span>
                            <span class="meta-value">{{ form.voice_lang === 'zh_hans' ? '中文' : form.voice_lang }}</span>
                        </div>
                        <div class="meta-item" v-if="form.lang">
                            <span class="meta-label">字幕:</span>
                            <span class="meta-value">{{ form.lang === 'zh_hant' ? '繁体中文' : form.lang }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="episode-selector" v-if="form.total > 1">
                <h3 class="section-title">选集观看/下载</h3>
                <div class="episode-list">
                    <span v-for="i in form.total" :key="i"
                        :class="['episode-chip', { selected: selectedEpisode === i }]" @click="selectEpisode(i)">
                        第{{ i }}集
                    </span>
                </div>
            </div>

            <!-- 操作按钮区域 -->
            <div class="action-section">
                <div class="action-buttons">
                    <button class="play-button" @click="goPlay">
                        <i class="play-icon"></i>
                        <span>立即播放</span>
                    </button>
                    <button class="download-button" @click="goDownload" :disabled="downloadLoading">
                        <i class="download-icon"></i>
                        <span v-if="!downloadLoading">下载观看</span>
                        <span v-else>
                            <i class="el-icon-loading"></i>
                            下载中...
                        </span>
                    </button>
                </div>
            </div>
        </el-dialog>
        <el-dialog :visible.sync="showVideoDialog" width="70vw" custom-class="modern-video-dialog"
            :destroy-on-close="true" @close="destroyDPlayer">
            <div ref="dplayer" style="width:100%;height:410px;position: relative;"></div>
            <div class="dp-control-bar">
                <button class="next-ep-btn" @click="playNextEpisode" :disabled="!hasNextEpisode">下一集</button>
                <span class="ep-info">
                    第{{ selectedEpisode }}集 / 共{{ form.total || 0 }}集
                </span>
            </div>
        </el-dialog>
        <el-dialog :visible.sync="showVideoDialog" width="70vw" custom-class="modern-video-dialog"
            :destroy-on-close="true" @close="destroyDPlayer">
            <!-- loading蒙层 -->
            <div v-if="videoLoading" class="video-loading-mask">
                <i class="el-icon-loading loading-icon"></i>
                <span>正在切换，请稍候...</span>
            </div>
            <div ref="dplayer" style="width:100%;height:410px;position: relative;"></div>
            <div class="dp-control-bar">
                <button class="next-ep-btn" @click="goDownload" :disabled="downloadLoading">
                    <i class="download-icon"></i>
                    <span v-if="!downloadLoading">下载观看</span>
                    <span v-else>
                        <i class="el-icon-loading"></i>
                        下载中...
                    </span></button>
                <button class="next-ep-btn" @click="playNextEpisode"
                    :disabled="!hasNextEpisode || videoLoading">下一集</button>
                <span class="ep-info">
                    第{{ selectedEpisode }}集 / 共{{ form.total || 0 }}集
                </span>
            </div>
        </el-dialog>
        <div v-if="videoLoading" class="global-video-loading-mask">
            <i class="el-icon-loading1 global-loading-icon"></i>
            <span>正在加载，请稍候...</span>
        </div>
    </div>

</template>
<script>
import DPlayer from 'dplayer'
import axios from 'axios'
import {
    mapState,
    mapGetters,
    mapMutations
} from "vuex";
// import pageHeader from "@/components/page-header.vue";
import { generateSign, categoryList, mediaList, fileDownload, proxyDownload } from "@/api/iptv";

export default {
    name: 'Home',
    components: {
        // pageHeader
    },

    data() {
        return {
            copyLoading: false, // 复制按钮加载状态
            selectedDate: null, // 替换原来的 selectedTimeRange
            pickerOptions: {
                disabledDate(time) {
                    // 禁用未来日期
                    return time.getTime() > Date.now();
                },
                shortcuts: [
                    {
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    },
                    {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    },
                    {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    },
                    {
                        text: '两周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 14);
                            picker.$emit('pick', date);
                        }
                    }
                ]
            },
            showVideoDialog: false,
            currentPlayUrl: '',
            type: null,
            city: null,
            sort: 0,
            typeId: '',
            cityId: '',
            typeList: [

            ],
            spec: null,
            comp: null,
            pageNo: 1,
            pageSize: 20,
            total: 100,
            continues: 4,
            nickname: '',
            byid: '',
            link: '',
            form: {},
            isLoggedIn: false,
            dialogVisible1: false,
            dialogVisible: false,
            dialogWidth: '540px', // 默认宽度为30%
            dialogWidth1: '700px', // 默认宽度为30%
            input: '',
            throttleTimeout: null,
            selectedEpisode: 1,      // 选中的集（初始为第1集）
            list: [

            ],
            searchTitle: "",
            shortplay_ids: '',
            selectedTypeIds: [],
            descExpanded: false, // 简介展开状态
            typeListLoading: false,
            mediaListLoading: false,
            downloadLoading: false,
            dplayer: null,
            currentPlayUrl: '',
            videos: {}, // 你的视频对象
            videoLoading: false,
            langList: [
                { code: "zh_hans", label: "简中" },
                { code: "zh_hant", label: "繁中" },
                { code: "en", label: "英语" },
                { code: "vi", label: "越南语" },
                { code: "id", label: "印尼语" },
                { code: "th", label: "泰语" },
                { code: "es", label: "西班牙语" },
                { code: "ko", label: "韩语" },
                { code: "pt", label: "葡萄牙语" },
                { code: "ja", label: "日语" }
            ],
            selectedLang: "zh_hans", // 默认简中
        }
    },
    watch: {
        showVideoDialog(val) {
            if (val) {
                this.$nextTick(() => {
                    // 只有没有实例时才初始化
                    if (!this.dplayer) {
                        this.initDPlayer();
                    }
                })
            } else {
                this.destroyDPlayer();
            }
        }
    },
    computed: {
        filteredList() {
            let result = this.list;

            // 时间筛选
            if (this.selectedDate) {
                result = result.filter(item => {
                    if (!item.first_online_time) return false;
                    const itemDate = new Date(item.first_online_time);
                    const selectedDate = new Date(this.selectedDate);
                    return itemDate.toDateString() === selectedDate.toDateString();
                });
            }

            return result;
        },

        hasNextEpisode() {
            // 只要selectedEpisode比总集数小就可点
            return this.selectedEpisode < Number(this.form.total);
        },
        totalPage() {
            return Math.ceil(this.total / this.pageSize);
        },
        // 连续页码起始数字与结束数字
        startNumAndEndNum() {
            const {
                pageNo,
                continues,
                totalPage
            } = this;
            let start = 0;
            let end = 0;
            // 如果总页数少于连续页数
            if (totalPage < continues) {
                start = 1;
                end = totalPage;
            } else {
                start = pageNo - Math.floor(continues / 2);
                end = pageNo + Math.floor(continues / 2);
                // start出现0/负数
                if (start < 1) {
                    start = 1;
                    end = continues;
                }
                // end大于总页数
                if (end > totalPage) {
                    start = totalPage - continues + 1;
                    end = totalPage;
                }
            }
            return {
                start,
                end
            };
        },
        pagesArr() {
            let arr = [];
            // 连续页码个数
            arr.length =
                this.totalPage < this.continues ? this.totalPage : this.continues;
            // 第一个连续页码
            let pageNum = this.startNumAndEndNum.start;
            for (let i = 0; i < arr.length; i++) {
                arr[i] = pageNum;
                pageNum++;
            }
            return arr;
        },
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.updateDialogWidth);
    },
    mounted() {
        this.fetchMediaList()
        this.updateDialogWidth();
        window.addEventListener('resize', this.updateDialogWidth);
        // this.getCityList()
        this.getTypeList()
    },
    methods: {
        // 复制 shortplay_id
        async copyShortplayId() {
            if (!this.form.shortplay_id || this.copyLoading) return;


            try {
                // 使用现代的 Clipboard API
                if (navigator.clipboard && window.isSecureContext) {
                    await navigator.clipboard.writeText(this.form.shortplay_id.toString());
                } else {
                    // 降级方案：使用传统的 execCommand
                    const textArea = document.createElement('textarea');
                    textArea.value = this.form.shortplay_id.toString();
                    textArea.style.position = 'fixed';
                    textArea.style.left = '-999999px';
                    textArea.style.top = '-999999px';
                    document.body.appendChild(textArea);
                    textArea.focus();
                    textArea.select();
                    document.execCommand('copy');
                    document.body.removeChild(textArea);
                }

                this.$message.success('剧集ID已复制到剪贴板');

                // 短暂显示成功状态
                setTimeout(() => {
                    this.copyLoading = false;
                }, 800);

            } catch (err) {
                console.error('复制失败:', err);
                this.$message.error('复制失败，请手动复制');
            }
        },
     

        // 新增日期选择处理方法
        handleDateChange(date) {
            this.selectedDate = date;
            // 这里不需要重新请求数据，computed会自动处理筛选
        },

        // 清空日期筛选
        clearDateFilter() {
            this.selectedDate = null;
        },
        formatDate(dateStr) {
            if (!dateStr) return '';
            const d = new Date(dateStr);
            // 仅年月日
            const y = d.getFullYear(), m = d.getMonth() + 1, da = d.getDate();
            return `${y}-${m < 10 ? '0' + m : m}-${da < 10 ? '0' + da : da}`;
            // 或者显示成 “07-29”
            // return `${m < 10 ? '0' + m : m}-${da < 10 ? '0' + da : da}`;
        },
        changeLang(code) {
            this.selectedLang = code;
            this.pageNo = 1;
            this.fetchMediaList();
        },
        initDPlayer() {
            // 防止容器还没渲染
            if (!this.$refs.dplayer) {
                // 可以加入重试机制，或直接return
                return;
            }
            if (this.dplayer) {
                this.dplayer.destroy();
            }
            this.dplayer = new DPlayer({
                container: this.$refs.dplayer,
                autoplay: true,
                video: {
                    url: this.currentPlayUrl
                },
                playbackSpeed: [0.5, 1.0, 1.25, 1.5, 2.0]
            });
            // DPlayer事件可选
            this.dplayer.on('ended', () => {
                this.playNextEpisode();
            });
        },
        // 多选切换
        toggleType(item) {
            const id = Number(item.id);
            const idx = this.selectedTypeIds.indexOf(id);
            if (idx === -1) {
                this.selectedTypeIds.push(id);
            } else {
                this.selectedTypeIds.splice(idx, 1);
            }
            this.pageNo = 1;
            this.fetchMediaList();
        },
        async changeCity(item, k) {
            this.pageNo = 1
            this.cityId = item.id
            this.city = k
            this.fetchMediaList()
        },
        changeType(item, k) {
            this.pageNo = 1

            this.typeId = item.id
            this.type = item.id
            this.fetchMediaList()
        },
        changeSort(item, k) {
            this.pageNo = 1

            this.sort = k
            this.fetchMediaList()

        },
        changeCityAll(item, k) {
            this.pageNo = 1

            this.city = null
            this.cityId = null
            this.fetchMediaList()

        },
        // 全部（清空多选）
        changeTypeAll() {
            this.selectedTypeIds = [];
            this.pageNo = 1;
            this.fetchMediaList();
        },

        async getTypeList() {
            if (this.typeListLoading) return; // 防重复
            this.typeListLoading = true;
            try {
                const timestamp = Math.floor(Date.now() / 1000);
                let sign = await generateSign({ user_id: '417000105', role_id: '417000105', timestamp, token: '023f0354284c13b666c17888576e6bb9' });
                // const { data: res } = await axios.post(
                //     'https://open-api.bytedrama.com/bytedrama/open/api/sp/category/list',
                //     {
                //         auth_info: {
                //             user_id: 417000105,
                //             role_id: 417000105,
                //             timestamp: String(timestamp),
                //             sign: String(sign.sign),
                //             token: '023f0354284c13b666c17888576e6bb9',
                //         }
                //     },
                //     {
                //         headers: {
                //             'Accept': '*/*',
                //             'Accept-Encoding': 'gzip, deflate, br',
                //             'Connection': 'Keep-Alive',
                //             'Content-Type': 'application/json',
                //             'User-Agent': 'okhttp/4.12.0',
                //             'token': '023f0354284c13b666c17888576e6bb9',
                //         }
                //     }
                // );
                // 2. 向自己后端/api/bytedrama/categoryList



                const { data: res } = await categoryList({
                    auth_info: {
                        user_id: 417000105,
                        role_id: 417000105,
                        timestamp: String(timestamp),
                        sign: String(sign.sign),
                        token: '023f0354284c13b666c17888576e6bb9',
                    }
                })
                this.typeList = res;
            } catch (e) {
                console.error(e);
            } finally {
                this.typeListLoading = false;
            }
        },



        showDialogVisible() {
            this.dialogVisible = true
        },



        updateDialogWidth() {
            this.dialogWidth = window.innerWidth < 600 ? '86%' : '800px';
            this.dialogWidth1 = window.innerWidth < 600 ? '86%' : '800px';
        },
        getPageNo(newPageNo) {
            this.pageNo = newPageNo;
            this.fetchMediaList();
            setTimeout(() => {
                this.scrollToTop();
            }, 200)
        },
        scrollToTop() {
            const scrollDuration = 500; // 动画持续时间，单位为毫秒
            const start = window.pageYOffset;
            const startTime = performance.now();

            const scroll = (timestamp) => {
                const currentTime = timestamp - startTime;
                const progress = Math.min(currentTime / scrollDuration, 1);
                const easeInOutCubic = (t) => t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;

                window.scrollTo(0, start * (1 - easeInOutCubic(progress)));

                if (progress < 1) {
                    window.requestAnimationFrame(scroll);
                }
            };

            window.requestAnimationFrame(scroll);
        },

        search() {
            this.pageNo = 1;
            this.fetchMediaList();
        },
        async fetchMediaList() {
            if (this.mediaListLoading) return; // 防重复
            this.mediaListLoading = true;
            try {
                const timestamp = Math.floor(Date.now() / 1000).toString();
                let sign = await generateSign({ user_id: '417000105', role_id: '417000105', timestamp, token: '023f0354284c13b666c17888576e6bb9' });
                // ...... 你的请求体
                const page = this.pageNo || 1;
                const page_size = 9999;
                let controller = {
                    lang: [this.selectedLang],
                    voice_lang: [this.selectedLang],
                    category_ids: this.selectedTypeIds
                };
                if (this.searchTitle && this.searchTitle.trim() !== '') {
                    controller.title = this.searchTitle.trim();
                }
                if (this.shortplay_ids && this.shortplay_ids.trim() !== '') {
                    controller.shortplay_ids = []
                    controller.shortplay_ids.push(Number(this.shortplay_ids));
                }

                let postData = {
                    auth_info: {
                        user_id: 417000105,
                        role_id: 417000105,
                        timestamp: String(timestamp),
                        sign: String(sign.sign),
                        token: '023f0354284c13b666c17888576e6bb9',
                    },
                    page_info: {
                        page: page,
                        page_size: page_size
                    },
                    controller: controller
                };
                // const { data: res } = await axios.post(
                //     'https://open-api.bytedrama.com/bytedrama/open/api/sp/file/list',
                //     postData,
                //     {
                //         headers: {
                //             'Accept': '*/*',
                //             'Accept-Encoding': 'gzip, deflate, br',
                //             'Connection': 'Keep-Alive',
                //             'Content-Type': 'application/json',
                //             'User-Agent': 'okhttp/4.12.0',
                //             'token': '023f0354284c13b666c17888576e6bb9'
                //         }
                //     }
                // );
                const res = await mediaList(postData)
                this.list = res.data
                // this.list = res.data || [];
                this.total = res.page_info.total || 0;
            } catch (e) {
                console.error(e);
            } finally {
                this.mediaListLoading = false;
            }
        },










        closeTag() {
            this.nickname = ''
            this.byid = ''
            this.fetchMediaList();

        },
        async showMedia(item) {
            console.log(item)
            this.form = Object.assign({}, item);
            this.descExpanded = false; // 重置展开状态
            this.dialogVisible1 = true;
        },

        // 选中某一集
        selectEpisode(index) {
            this.selectedEpisode = index;
            this.goPlay();
        },
        async goPlay() {
            this.videoLoading = true;
            try {
                console.log('goPlay 调用，当前 selectedEpisode 为', this.selectedEpisode); // 调试
                const timestamp = Math.floor(Date.now() / 1000);
                let signRes = await generateSign({
                    user_id: '417000105',
                    role_id: '417000105',
                    timestamp,
                    token: '023f0354284c13b666c17888576e6bb9'
                });

                const params = {
                    auth_info: {
                        user_id: 417000105,
                        role_id: 417000105,
                        timestamp: String(timestamp),
                        sign: String(signRes.sign),
                        token: '023f0354284c13b666c17888576e6bb9'
                    },
                    controller: {
                        download_config: [
                            {
                                file_id: this.form.file_id,
                                target_index: [Number(this.selectedEpisode)]
                            }
                        ]
                    }
                };
                console.log('请求参数', params);
                const res = await fileDownload(params)
                if (res.code != 100) {
                    console.log(res.code)
                    this.$message.error(res.message)
                }
                this.videos = res.data[0];
                this.currentPlayUrl = this.videos.episode_list[0].play_url;

                this.showVideoDialog = true;
                // 这里不要再立即this.initDPlayer了，应该交给watch去做初始化
                // 但如果已经有了实例（比如当前就在弹窗），就 switchVideo
                if (this.dplayer) {
                    this.dplayer.switchVideo({
                        url: this.currentPlayUrl
                    });
                    this.dplayer.play();
                }

                // else 的 dplayer 初始化由 watch:showVideoDialog 负责！
            } catch (e) {
            } finally {
                this.videoLoading = false;
            }
        },

        initDPlayer() {
            // 判断ref防止容器未渲染
            if (!this.$refs.dplayer) return;
            if (this.dplayer) {
                this.dplayer.destroy();
            }
            this.dplayer = new DPlayer({
                container: this.$refs.dplayer,
                autoplay: true,
                video: {
                    url: this.currentPlayUrl
                },
                playbackSpeed: [0.5, 1.0, 1.25, 1.5, 2.0],
            });
            this.dplayer.on('ended', () => {
                this.playNextEpisode();
            });
        },


        // 下一集
        async playNextEpisode() {
            if (!this.hasNextEpisode) {
                this.$message.warning('已经是最后一集了~');
                return;
            }
            this.videoLoading = true;
            this.selectedEpisode++;
            await this.goPlay();
            this.videoLoading = false;
        },

        // 销毁播放器，防止多次挂载
        destroyDPlayer() {
            if (this.dplayer) {
                this.dplayer.destroy();
                this.dplayer = null;
            }
        },
        async goDownload() {
            if (this.downloadLoading) return; // 防止重复点击
            this.downloadLoading = true;
            try {
                const timestamp = Math.floor(Date.now() / 1000);
                let signRes = await generateSign({
                    user_id: '417000105',
                    role_id: '417000105',
                    timestamp,
                    token: '023f0354284c13b666c17888576e6bb9'
                });

                const params = {
                    auth_info: {
                        user_id: 417000105,
                        role_id: 417000105,
                        timestamp: String(timestamp),
                        sign: String(signRes.sign),
                        token: '023f0354284c13b666c17888576e6bb9',
                    },
                    controller: {
                        download_config: [
                            {
                                file_id: this.form.file_id,
                                target_index: [Number(this.selectedEpisode)]
                            }
                        ]
                    }
                };
                const res = await fileDownload(params);
                if (res.code != 100) {
                    console.log(res.code)
                    this.$message.error(res.message)
                }
                const videos = res.data[0];
                const { play_url, name } = videos.episode_list[0];
                const link = document.createElement('a');
                link.href = play_url;
                link.download = name || `video_${this.selectedEpisode}.mp4`;
                link.target = '_blank';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
                this.$message.success('拉取下载地址成功,请到下载记录中查看')
                // // 用 fetch 方式下载
                // const response = await fetch(play_url, { mode: 'cors' });
                // if (!response.ok) throw new Error('下载请求失败');
                // const blob = await response.blob();
                // const blobUrl = URL.createObjectURL(blob);

                // const a = document.createElement('a');
                // a.href = blobUrl;
                // a.download = name || `video_${this.selectedEpisode}.mp4`;
                // a.click();
                // URL.revokeObjectURL(blobUrl);
                // const downloadUrl = `https://insdoss.freeapptools.com/node/iptv/proxyDownload?url=${encodeURIComponent(play_url)}&name=${encodeURIComponent(name || `video_${this.selectedEpisode}.mp4`)}`;
                // window.open(downloadUrl); // 会自动弹出下载保存框
                // this.$message.success('拉取下载地址成功,请到下载记录中查看');

                // this.$message.success('已开始下载');
            } catch (e) {
                console.error('操作失败: ', e);
                // this.$message.error('下载失败，请重试！');
            } finally {
                this.downloadLoading = false;
            }
        }


    }
}
</script>
<style scoped lang="scss">
.search-input {
    border: 1.5px solid #447dff;
    border-radius: 8px;
    outline: none;
    padding: 0 12px;
    height: 32px;
    font-size: 15px;
    color: #314365;
    background: #fff;
    transition: border 0.2s;
}

.search-input:focus {
    border-color: #25b4ff;
}

.global-video-loading-mask {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 18, 29, 0.7);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    transition: background 0.2s;
}

.global-loading-icon,
.el-icon-loading1 {
    font-size: 56px;
    color: #47c6ff;
    margin-bottom: 20px;
    text-shadow: 0 2px 22px #407dff7a;
}

.global-video-loading-mask span {
    color: #eaf8ff;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 2px;
    text-shadow: 0 1px 3px #2226;
}

.modern-video-dialog {
    background: radial-gradient(circle at 50% 30%, #10182c 80%, #161b32 100%);
    border-radius: 20px;
    box-shadow: 0 10px 60px #09133a99, 0 1.5px 24px #407dff33;
    border: none;
    overflow: visible;
    padding: 0 !important;
    position: relative;
}

.modern-video-dialog .el-dialog__header {
    background: transparent;
    border-bottom: none;
    padding: 15px 36px 5px 36px;
}

.modern-video-dialog .el-dialog__title {
    color: #e2e9fc;
    font-size: 18px;
    letter-spacing: 2px;
    font-weight: 700;
}

.modern-video-dialog .el-dialog__body {
    padding: 0 !important;
    background: transparent;
    position: relative;
    border-radius: 0 0 16px 16px;
    min-height: 345px;
    /* 留足空间 */
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.modern-video-dialog .el-dialog__headerbtn .el-dialog__close {
    font-size: 24px;
    color: #b3b7d7 !important;
    transition: color .25s;
}

.modern-video-dialog .el-dialog__headerbtn .el-dialog__close:hover {
    color: #25b4ff !important;
    text-shadow: 0 0 4px #72ceffbb;
}

/* DPlayer区块优化 */
.modern-video-dialog [ref="dplayer"],
.modern-video-dialog .dplayer,
.modern-video-dialog .dplayer-video-wrap {
    width: 100% !important;
    min-height: 760px;
    background: #0f1429;
    border-radius: 14px;
    box-shadow: 0 6px 32px #0007, 0 1.5px 24px #407dff22;
}

/* 控制条居中、发光和科技感按钮 */
.dp-control-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 28px;
    margin: 16px 36px 14px 36px;
    padding: 0;
    min-height: 40px;
    margin-bottom: 0;
}

.next-ep-btn {
    background: linear-gradient(91deg, #25b4ff 0%, #407dff 100%);
    color: #fff;
    border: 0;
    border-radius: 18px;
    padding: 7px 30px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1.5px 12px #45c8f744, 0 0.5px 4px #407dff33;
    transition: background 0.16s, box-shadow 0.23s, transform 0.14s;
}

.media-meta {


    .episode-count {
        /* 不变 */
    }

    .first-date {
        color: #51e5ff;
        font-size: 12px;
        padding: 3px 0px;
        margin-left: 6px;
        font-weight: 500;
        letter-spacing: 1px;
    }
}

.next-ep-btn:disabled {
    background: #393c56;
    color: #b4b8d4;
    cursor: not-allowed;
    box-shadow: none;
}

.ep-info {
    color: #b7ceed;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 1px;
}

/* Loading 蒙层可搭配 */
.video-loading-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(18, 24, 45, 0.82);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2222;
}

.video-loading-mask .el-icon-loading {
    font-size: 44px;
    margin-bottom: 13px;
    color: #47c6ff;
    text-shadow: 0 2px 22px #407dff7a;
}

.video-loading-mask span {
    color: #e5f4ff;
    font-size: 18px;
    letter-spacing: 2px;
    opacity: 0.95;
}

/* 针对 el-dialog 整体和 body 都改色 */
::v-deep .modern-video-dialog,
::v-deep .modern-video-dialog .el-dialog,
::v-deep .modern-video-dialog .el-dialog__body {
    background: radial-gradient(circle at 50% 30%, #10182c 80%, #161b32 100%) !important;
    border-radius: 20px !important;
    border: none !important;
    color: #e8eeff;
}

/* 响应式适配 */
@media (max-width: 900px) {
    .modern-video-dialog {
        width: 98vw !important;
        min-width: unset;
        max-width: 98vw;
        border-radius: 10px;
    }

    .modern-video-dialog .el-dialog__body {
        min-height: 180px;
    }

    .dp-control-bar {
        margin: 13px 12px 10px 12px;
        margin-bottom: 0;
        padding: 0;
    }
}

.video-loading-mask {
    position: absolute;
    z-index: 2222;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(18, 24, 45, 0.74);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.loading-icon {
    font-size: 42px;
    color: #408fff;
    margin-bottom: 8px;
}

.video-loading-mask span {
    color: #bfcfff;
    font-size: 18px;
    margin-top: 6px;
    text-shadow: 0 1px 3px #3336;
}

.dp-control-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
    margin-top: 10px;
}

.next-ep-btn {
    background: #407dff;
    color: #fff;
    border: none;
    border-radius: 18px;
    padding: 6px 18px;
    font-size: 15px;
    cursor: pointer;
    margin-right: 8px;
}

.next-ep-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.ep-info {
    color: #b8c2e8;
    font-size: 14px;
}

.empty-state {
    text-align: center;
    padding: 60px 0 50px 0;
    color: #b8c2e8;

    .empty-icon {
        margin: 0 auto 18px;
        width: 90px;
        height: 90px;
        background: radial-gradient(circle 31px at 50% 60%, #21274b 40%, #374879 100%), linear-gradient(135deg, #4467fc 0%, #51e5ff 100%);
        border-radius: 50%;
        box-shadow: 0 8px 30px rgba(64, 125, 255, 0.13);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .empty-icon::after {
        content: '';
        display: block;
        position: absolute;
        left: 22px;
        top: 30px;
        width: 46px;
        height: 18px;
        background: #fff;
        opacity: .07;
        border-radius: 9px 9px 18px 18px;
    }

    .empty-title {
        font-size: 20px;
        color: #447dff;
        font-weight: 700;
        margin-bottom: 8px;
        margin-top: 20px;
        letter-spacing: 1px;
    }

    .empty-desc {
        font-size: 14px;
        color: #b8c2e8;
    }
}

.loading-wrap,
.page-list-loading-mask {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 24, 45, 0.45);
    z-index: 10;
}

.loader {
    width: 54px;
    height: 54px;
    border: 5px solid #2947e6;
    border-top: 5px solid #02c8fd;
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

.contarner-page {
    padding: 30px;
    background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 100%);
    min-height: 93vh;
}

/* 现代简约视频弹窗样式 */
.modern-video-dialog {
    background: linear-gradient(135deg, #232d4d 0%, #191f36 100%);
    border-radius: 16px;
    box-shadow: 0 16px 48px rgba(30, 36, 66, 0.45);
    overflow: hidden;
    padding: 0 !important;
}

.modern-video-dialog .el-dialog__header {
    border-bottom: none;
    background: transparent;
}

.modern-video-dialog .el-dialog__title {
    color: #fff;
    font-size: 18px;
}

.modern-video-dialog .el-dialog__body {
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
}

.modern-video-dialog video {
    background: #11172b;
    outline: none;
    border-radius: 0 0 14px 14px;
    max-width: 100%;
    max-height: 70vh;
    box-shadow: 0 0 0 1px #232d4d, 0 4px 16px rgba(46, 57, 133, .15);
    margin: 0 auto;
    display: block;
}

.modern-video-dialog .el-dialog__headerbtn .el-dialog__close {
    color: #b8c2e8;
    font-size: 20px;
    transition: color .2s;
}

.modern-video-dialog .el-dialog__headerbtn .el-dialog__close:hover {
    color: #fff;
}

/* 响应式兼容小屏 */
@media (max-width: 768px) {
    .modern-video-dialog {
        width: 98vw !important;
        max-width: 98vw;
    }

    .modern-video-dialog video {
        max-width: 98vw;
        max-height: 40vh;
    }
}

/* 弹框整体样式 */
::v-deep .modern-media-dialog {
    background: linear-gradient(145deg, #1e2442 0%, #151b2e 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6);
    overflow: hidden;

    .el-dialog__header {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);

        .dialog-title {
            color: #ffffff;
            font-size: 20px;
            font-weight: 600;
        }

        .el-dialog__headerbtn {
            top: 20px;
            right: 20px;

            .el-dialog__close {
                color: #b8c2e8;
                font-size: 20px;

                &:hover {
                    color: #ffffff;
                }
            }
        }
    }

    .el-dialog__body {
        padding: 0;
        max-height: 70vh;
        overflow-y: auto;

        /* 自定义滚动条 */
        &::-webkit-scrollbar {
            width: 6px;
        }

        &::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
        }

        &::-webkit-scrollbar-thumb {
            background: rgba(64, 125, 255, 0.5);
            border-radius: 3px;

            &:hover {
                background: rgba(64, 125, 255, 0.7);
            }
        }
    }
}

.modern-media-dialog .episode-selector {
    padding: 0 20px
}

.modern-media-dialog .episode-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 5px 0;
}

.modern-media-dialog .episode-chip {
    background: rgba(100, 120, 255, 0.13);
    color: #b8c2e8;
    padding: 6px 14px;
    border-radius: 16px;
    cursor: pointer;
    font-size: 14px;
    border: 1px solid transparent;
    transition: all .2s;
    user-select: none;
}

.modern-media-dialog .episode-chip.selected {
    background: #407dff;
    color: #fff;
    border-color: #407dff;
}

.modern-media-dialog .episode-chip:hover {
    color: #fff;
    border-color: #407dff;
}

.dialog-content {
    display: flex;
    gap: 30px;
    padding: 30px;
}

/* 海报区域 */
.poster-section {
    flex-shrink: 0;

    .poster-container {
        position: relative;
        width: 200px;

        .poster-image {
            width: 100%;
            height: 280px;
            object-fit: cover;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }

        .poster-badge {
            position: absolute;
            top: 12px;
            right: 12px;
            background: linear-gradient(135deg, #407DFF 0%, #01C2FF 100%);
            color: white;
            padding: 6px 12px;
            border-radius: 15px;
            font-size: 12px;
            font-weight: 600;
            box-shadow: 0 4px 12px rgba(64, 125, 255, 0.4);
        }
    }
}

/* 信息区域 */
.info-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
    /* 防止flex子项溢出 */

    .media-title {
        color: #ffffff;
        font-size: 24px;
        font-weight: 700;
        line-height: 1.3;
        margin: 0;
        word-wrap: break-word;
        hyphens: auto;
    }

    .category-section {
        .category-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;

            .category-chip {
                display: inline-block;
                background: rgba(64, 125, 255, 0.15);
                color: #407DFF;
                padding: 6px 14px;
                border-radius: 20px;
                font-size: 13px;
                font-weight: 500;
                border: 1px solid rgba(64, 125, 255, 0.3);
                backdrop-filter: blur(10px);
                white-space: nowrap;
            }
        }
    }

    .description-section {
        .section-title {
            color: #ffffff;
            font-size: 16px;
            font-weight: 600;
            margin: 0 0 12px 0;
        }

        .description-content {
            position: relative;

            .description-text {
                color: #b8c2e8;
                font-size: 14px;
                line-height: 1.6;
                margin: 0;
                word-wrap: break-word;
                hyphens: auto;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                overflow: hidden;
                transition: all 0.3s ease;
            }

            &:not(.expanded) .description-text {
                -webkit-line-clamp: 4;
            }

            &.expanded .description-text {
                -webkit-line-clamp: unset;
            }

            .expand-btn {
                color: #407DFF;
                font-size: 13px;
                cursor: pointer;
                margin-top: 8px;
                display: flex;
                align-items: center;
                gap: 4px;
                transition: color 0.3s ease;

                &:hover {
                    color: #01C2FF;
                }

                i {
                    font-size: 12px;
                }
            }
        }
    }

    .meta-info {
        display: flex;
        gap: 20px;

        .meta-item {
            display: flex;
            align-items: center;
            gap: 8px;

            .meta-label {
                color: #8892b0;
                font-size: 14px;
                font-weight: 500;
            }

            .meta-value {
                color: #b8c2e8;
                font-size: 14px;
                padding: 4px 10px;
                background: rgba(255, 255, 255, 0.05);
                border-radius: 8px;
            }

            /* shortplay_id 的特殊样式 */
            .meta-value-with-copy {
                display: flex;
                align-items: center;
                gap: 12px;
                flex: 1;

                .shortplay-id-text {
                    color: #51e5ff;
                    font-size: 14px;
                    font-weight: 600;
                    padding: 6px 12px;
                    background: rgba(81, 229, 255, 0.1);
                    border: 1px solid rgba(81, 229, 255, 0.3);
                    border-radius: 8px;
                    font-family: 'Consolas', 'Monaco', monospace;
                    letter-spacing: 1px;
                    user-select: all;
                    /* 允许用户选中文本 */
                    cursor: text;
                    transition: all 0.3s ease;

                    &:hover {
                        background: rgba(81, 229, 255, 0.15);
                        border-color: rgba(81, 229, 255, 0.5);
                        box-shadow: 0 2px 8px rgba(81, 229, 255, 0.2);
                    }
                }

                .copy-btn {
                    display: inline-flex;
                    align-items: center;
                    gap: 6px;
                    padding: 6px 14px;
                    background: linear-gradient(135deg, #4ECB71 0%, #44A08D 100%);
                    border: none;
                    border-radius: 16px;
                    color: white;
                    font-size: 12px;
                    font-weight: 500;
                    cursor: pointer;
                    transition: all 0.3s ease;
                    box-shadow: 0 2px 8px rgba(78, 203, 113, 0.2);
                    white-space: nowrap;

                    &:hover:not(:disabled) {
                        transform: translateY(-1px);
                        box-shadow: 0 4px 12px rgba(78, 203, 113, 0.3);
                    }

                    &:active:not(:disabled) {
                        transform: translateY(0);
                    }

                    &:disabled {
                        opacity: 0.7;
                        cursor: not-allowed;
                        transform: none;
                    }

                    .copy-icon {
                        width: 12px;
                        height: 12px;
                        position: relative;

                        &:not(.el-icon-loading)::before {
                            content: '';
                            position: absolute;
                            left: 0;
                            top: 0;
                            width: 8px;
                            height: 10px;
                            border: 1.5px solid currentColor;
                            border-radius: 2px;
                        }

                        &:not(.el-icon-loading)::after {
                            content: '';
                            position: absolute;
                            left: 3px;
                            top: -3px;
                            width: 8px;
                            height: 10px;
                            border: 1.5px solid currentColor;
                            border-radius: 2px;
                        }

                        &.el-icon-loading {
                            font-size: 12px;
                            animation: rotate 1s linear infinite;
                        }
                    }

                    .copy-text {
                        font-size: 12px;
                    }
                }
            }
        }
    }
}

/* 操作按钮区域 */
.action-section {
    padding: 0 30px 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 20px;
    padding-top: 24px;

    .action-buttons {
        display: flex;
        gap: 16px;

        button {
            flex: 1;
            height: 48px;
            border: none;
            border-radius: 24px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;

            i {
                font-size: 18px;
            }

            &:hover {
                transform: translateY(-2px);
            }

            &:active {
                transform: translateY(0);
            }
        }

        .play-button {
            background: linear-gradient(135deg, #FF6B6B 0%, #FF8E8E 100%);
            color: white;
            box-shadow: 0 8px 25px rgba(255, 107, 107, 0.3);

            &:hover {
                box-shadow: 0 12px 30px rgba(255, 107, 107, 0.4);
            }

            .play-icon {
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 8px 0 8px 12px;
                border-color: transparent transparent transparent currentColor;
            }
        }

        .download-button {
            background: linear-gradient(135deg, #4ECB71 0%, #44A08D 100%);
            color: white;
            box-shadow: 0 8px 25px rgba(78, 203, 113, 0.3);

            &:hover {
                box-shadow: 0 12px 30px rgba(78, 203, 113, 0.4);
            }

            .download-icon {
                width: 16px;
                height: 16px;
                position: relative;

                &::before {
                    content: '';
                    position: absolute;
                    left: 50%;
                    top: 0;
                    width: 2px;
                    height: 10px;
                    background: currentColor;
                    transform: translateX(-50%);
                }

                &::after {
                    content: '';
                    position: absolute;
                    left: 50%;
                    bottom: 2px;
                    width: 0;
                    height: 0;
                    border-style: solid;
                    border-width: 4px 4px 0 4px;
                    border-color: currentColor transparent transparent transparent;
                    transform: translateX(-50%);
                }
            }
        }
    }
}

::v-deep .el-tag {
    margin-left: 8px;
    border: 0;
    background-color: #344264;
    font-size: 16px;
    line-height: 33px;
}

.search_box {
    margin-top: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 20px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);

    .item {
        display: flex;
        align-items: flex-start;
        margin-bottom: 20px;

        .tag_title {
            color: #fff;
            font-size: 18px;
            font-weight: 600;
            width: 128px;
            text-align: right;
            padding: 8px 8px 8px 0;
        }

        .content {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;

            /* 时间标签特殊样式 */
            .time-tag {
                background: rgba(255, 255, 255, 0.1);
                border: 1px solid rgba(255, 255, 255, 0.2);
                color: #b8c2e8;
                font-size: 13px;
                padding: 0 16px;
                white-space: nowrap;
                position: relative;

                &:hover {
                    background: rgba(81, 229, 255, 0.2);
                    border-color: #51e5ff;
                    color: #fff;
                    box-shadow: 0 2px 8px rgba(81, 229, 255, 0.2);
                }

                &.change {
                    color: #fff;
                    background: linear-gradient(135deg, #407DFF 0%, #01C2FF 100%);
                    border: none;
                    box-shadow: 0 4px 15px rgba(64, 125, 255, 0.3);
                }

                /* 今天和昨天的特殊标识 */
                &:first-child:after {
                    content: '';
                    position: absolute;
                    top: -2px;
                    right: -2px;
                    width: 6px;
                    height: 6px;
                    background: #ff6b6b;
                    border-radius: 50%;
                    box-shadow: 0 0 6px rgba(255, 107, 107, 0.6);
                }
            }
        }

        .tag_all,
        .tag {
            height: 36px;
            border-radius: 18px;
            line-height: 36px;
            padding: 0 20px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: #b8c2e8;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s ease;
            cursor: pointer;

            &:hover {
                background: rgba(64, 125, 255, 0.2);
                border-color: #407DFF;
                color: #fff;
            }
        }

        .change {
            color: #fff;
            background: linear-gradient(135deg, #407DFF 0%, #01C2FF 100%);
            border: none;
            box-shadow: 0 4px 15px rgba(64, 125, 255, 0.3);
        }
    }
}


::v-deep .my-custom-message {
    background-color: red !important;
    /* 自定义背景色 */
    color: white;
    /* 如果需要也可以更换文字颜色 */
}

::v-deep .el-dialog__title {
    color: #eee;
    font-size: 20px;
}

::v-deep .el-input__inner {
    background-color: transparent;
    border-color: #4089F7;
    color: #eee;
}



::v-deep .el-form-item__label {
    color: #eee;
    font-size: 16px;
}



::v-deep .button-porter1 {
    background: #344264;
    border: 0;
}

::v-deep.button-porter-play {
    border: 0;
    background: linear-gradient(270deg, #074CFF 0%, #01C2FF 100%);
}

::v-deep .button-porter {
    width: 100%;
    background: linear-gradient(270deg, #074CFF 0%, #01C2FF 100%);
}

::v-deep .button-text {
    font-size: 14px;
}



.el-tag {
    margin-top: 20px;
    font-size: 16px;
}

.dialog-footer {
    text-align: right;
}

.page_content {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .home_content {

        width: 100%;

        .logo {
            margin-right: 30px;
        }

        .login {
            margin-left: 30px;
        }
    }
}

.page_top {
    display: flex;
    align-content: center;
    justify-content: space-between;
}

.success-box {
    padding: 30px 0;

    .success-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 20px;
        padding: 0;
    }
}

.media-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);

    &:hover {
        transform: translateY(-6px) scale(1.02);
        box-shadow:
            0 20px 40px rgba(0, 0, 0, 0.3),
            0 0 0 1px rgba(64, 125, 255, 0.5);
        border-color: rgba(64, 125, 255, 0.3);

        .poster-img {
            transform: scale(1.1);
        }

        .poster-overlay {
            opacity: 1;
        }

        .play-icon {
            transform: scale(1) rotate(0deg);
        }

        .media-title {
            color: #407DFF;
        }
    }

    .card-inner {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .media-poster {
        position: relative;
        aspect-ratio: 3/4;
        overflow: hidden;
        background: linear-gradient(135deg, #1a1f3a 0%, #0f1429 100%);

        .poster-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .poster-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg,
                    rgba(64, 125, 255, 0.8) 0%,
                    rgba(1, 194, 255, 0.6) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: all 0.3s ease;
        }

        .play-icon {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.95);
            display: flex;
            align-items: center;
            justify-content: center;
            transform: scale(0.8) rotate(-10deg);
            transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);

            .icon-play {
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 8px 0 8px 14px;
                border-color: transparent transparent transparent #407DFF;
                margin-left: 2px;
            }
        }
    }

    .media-info {
        padding: 16px;
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 12px;

        .media-title {
            font-size: 16px;
            font-weight: 600;
            color: #ffffff;
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            transition: color 0.3s ease;
        }

        .media-meta {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-top: auto;

            .episode-count {
                display: inline-flex;
                align-items: center;
                padding: 4px 12px;
                background: linear-gradient(135deg, #407DFF 0%, #01C2FF 100%);
                color: white;
                font-size: 12px;
                font-weight: 600;
                border-radius: 12px;
                align-self: flex-start;
                box-shadow: 0 2px 8px rgba(64, 125, 255, 0.3);
            }

            .category-tags {
                display: flex;
                gap: 6px;
                flex-wrap: wrap;

                .category-tag {
                    padding: 3px 8px;
                    background: rgba(255, 255, 255, 0.15);
                    color: #b8c2e8;
                    font-size: 11px;
                    font-weight: 500;
                    border-radius: 8px;
                    border: 1px solid rgba(255, 255, 255, 0.1);
                    backdrop-filter: blur(5px);
                }
            }
        }
    }
}



.dialog-box {
    .media_img {
        .img {
            object-fit: cover;
            width: 200px;
            height: 280px;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }
    }

    .info {
        margin-left: 30px;
        height: 280px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .row {
            flex: 1;

            .col {
                margin-bottom: 16px;

                &.title-col {
                    font-size: 22px;
                    font-weight: 700;
                    color: #fff;
                    line-height: 1.3;
                }

                &.desc-col {
                    font-size: 14px;
                    color: #b8c2e8;
                    line-height: 1.5;
                    display: -webkit-box;
                    -webkit-line-clamp: 4;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                }

                &.category-col {
                    .label {
                        color: #b8c2e8;
                        font-size: 14px;
                    }

                    .category-tag {
                        display: inline-block;
                        background: linear-gradient(135deg, #407DFF 0%, #01C2FF 100%);
                        color: white;
                        padding: 4px 12px;
                        border-radius: 12px;
                        font-size: 12px;
                        margin-right: 8px;
                        margin-bottom: 4px;
                    }
                }

                &:not(.title-col):not(.desc-col):not(.category-col) {
                    font-size: 16px;
                    color: #eee;
                }
            }
        }

        .btns {
            gap: 15px;
            margin-top: 20px;

            .button-play,
            .button-download {
                flex: 1;
                height: 44px;
                border-radius: 22px;
                font-size: 14px;
                font-weight: 600;
                border: none;
                transition: all 0.3s ease;

                i {
                    margin-right: 6px;
                }
            }

            .button-play {
                background: linear-gradient(135deg, #FF6B6B 0%, #FF8E8E 100%);
                box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);

                &:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
                }
            }

            .button-download {
                background: linear-gradient(135deg, #4ECB71 0%, #44A08D 100%);
                box-shadow: 0 4px 15px rgba(78, 203, 113, 0.3);

                &:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 6px 20px rgba(78, 203, 113, 0.4);
                }
            }
        }
    }
}

.mobile-buttons {
    display: flex;
    gap: 15px;
    margin-top: 20px;

    .mobile-button {
        flex: 1;
        height: 44px;
        border-radius: 22px;
        font-size: 14px;
        font-weight: 600;
        border: none;

        i {
            margin-right: 6px;
        }
    }
}

.modern-pagination {
    display: flex;
    justify-content: center;
    margin: 40px 0;

    .pagination-container {
        display: flex;
        align-items: center;
        gap: 8px;
        background: rgba(255, 255, 255, 0.05);
        padding: 12px 20px;
        border-radius: 50px;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);

        .pagination-btn {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 16px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 25px;
            color: #fff;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;

            &:hover:not(.disabled) {
                background: linear-gradient(135deg, #407DFF 0%, #01C2FF 100%);
                border-color: transparent;
                transform: translateY(-1px);
                box-shadow: 0 4px 12px rgba(64, 125, 255, 0.3);
            }

            &.disabled {
                opacity: 0.4;
                cursor: not-allowed;

                &:hover {
                    transform: none;
                    box-shadow: none;
                }
            }

            .arrow-left,
            .arrow-right {
                width: 0;
                height: 0;
                border-style: solid;
            }

            .arrow-left {
                border-width: 4px 6px 4px 0;
                border-color: transparent currentColor transparent transparent;
            }

            .arrow-right {
                border-width: 4px 0 4px 6px;
                border-color: transparent transparent transparent currentColor;
            }

            .btn-text {
                font-size: 13px;
            }
        }

        .page-numbers {
            display: flex;
            align-items: center;
            gap: 4px;
            margin: 0 12px;

            .page-btn {
                min-width: 36px;
                height: 36px;
                border-radius: 18px;
                border: 1px solid rgba(255, 255, 255, 0.2);
                background: rgba(255, 255, 255, 0.1);
                color: #b8c2e8;
                font-size: 14px;
                font-weight: 500;
                cursor: pointer;
                transition: all 0.3s ease;
                display: flex;
                align-items: center;
                justify-content: center;

                &:hover:not(.active) {
                    background: rgba(64, 125, 255, 0.2);
                    border-color: #407DFF;
                    color: #fff;
                    transform: translateY(-1px);
                }

                &.active {
                    background: linear-gradient(135deg, #407DFF 0%, #01C2FF 100%);
                    border-color: transparent;
                    color: #fff;
                    font-weight: 600;
                    box-shadow: 0 4px 15px rgba(64, 125, 255, 0.4);
                }
            }

            .dots {
                color: #b8c2e8;
                font-size: 14px;
                padding: 0 8px;
                user-select: none;
            }
        }

        .page-info {
            margin-left: 16px;
            padding-left: 16px;
            border-left: 1px solid rgba(255, 255, 255, 0.2);
            color: #b8c2e8;
            font-size: 13px;
            white-space: nowrap;
        }
    }
}



/* 平板适配 */
@media (max-width: 1024px) {
    .success-box .success-list {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 16px;
    }

    .media-card .media-info {
        padding: 14px;

        .media-title {
            font-size: 15px;
        }
    }
}

// 宽度小于1023px


.APPSHOW {
    display: none;
}


// 宽度小于768px
@media (max-width: 768px) {
    .PCSHOW {
        display: none !important;
    }

    .dialog-content {
        flex-direction: column;
        gap: 20px;
        padding: 20px;
    }

    .poster-section {
        align-self: center;

        .poster-container {
            width: 160px;

            .poster-image {
                height: 220px;
            }
        }
    }

    .info-section {
        .media-title {
            font-size: 20px;
        }

        .meta-info {
            flex-direction: column;
            gap: 12px;
        }
    }

    .action-section {
        padding: 0 20px 20px;

        .action-buttons {
            button {
                height: 44px;
                font-size: 15px;
            }
        }
    }

    ::v-deep .modern-media-dialog {
        .el-dialog__header {
            padding: 20px;

            .dialog-title {
                font-size: 18px;
            }
        }
    }



    ::v-deep .el-dialog__body {
        padding: 20px;
    }

    ::v-deep .el-dialog__header {
        padding: 20px;
    }

    ::v-deep .el-tag {
        margin-left: 8px;
        border: 0;
        background-color: #344264;
        font-size: 12px;
    }

    .loginbtns {
        .button-text {
            margin-left: 0px;
            display: block;
        }
    }

    .APPSHOW {
        display: block;
    }

    .container {
        padding: 0 14px;
    }

    .page_content {}

    .page_top {
        display: flex;
        flex-direction: column;

        .top {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .bottom {
            margin: 10px 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
    }

    .search_box {
        padding: 16px;

        .item {
            flex-direction: column;

            .tag_title {
                text-align: left;
                width: auto;
                margin-bottom: 12px;
                padding: 0;
            }

            .content {
                overflow-x: auto;
                flex-wrap: nowrap;
                padding-bottom: 8px;

                .time-tag {
                    font-size: 12px;
                    padding: 0 12px;
                    height: 32px;
                    line-height: 32px;
                }

                &::-webkit-scrollbar {
                    height: 4px;
                }

                &::-webkit-scrollbar-track {
                    background: rgba(255, 255, 255, 0.1);
                    border-radius: 2px;
                }

                &::-webkit-scrollbar-thumb {
                    background: #407DFF;
                    border-radius: 2px;
                }
            }

            .tag_all,
            .tag {
                flex-shrink: 0;
                margin-bottom: 0;
            }
        }
    }

    .success-box {
        padding: 20px 0;

        .success-list {
            grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
            gap: 14px;
            padding: 0 16px;
        }
    }

    .media-card {
        border-radius: 10px;

        &:hover {
            transform: translateY(-3px) scale(1.01);
        }

        .media-poster .play-icon {
            width: 40px;
            height: 40px;

            .icon-play {
                border-width: 6px 0 6px 10px;
            }
        }

        .media-info {
            padding: 12px;
            gap: 10px;

            .media-title {
                font-size: 14px;
                -webkit-line-clamp: 2;
            }

            .media-meta {
                .episode-count {
                    padding: 3px 10px;
                    font-size: 11px;
                }

                .category-tags .category-tag {
                    padding: 2px 6px;
                    font-size: 10px;
                }
            }
        }
    }




    .dialog-box {
        flex-direction: column;

        .media_img .img {
            width: 140px;
            height: 200px;
            margin: 0 auto;
        }

        .info {
            margin-left: 0;
            margin-top: 20px;
            height: auto;

            .row .col {
                &.desc-col {
                    -webkit-line-clamp: 3;
                }
            }
        }
    }

    .app-button-porter {
        width: 100%;
        margin-top: 14px;
    }

    .app-porter-play {
        margin-top: 14px;
        width: 100%;
        margin-left: 0;
    }


}

.download-footer {
    margin-top: 30px;

    .btn-app {
        padding: 11px;
        background-color: #dd34ab;
        border-radius: 6px 6px 6px 6px;
        width: 100%;
    }

    .gohome {
        background-color: #1d212c;

        margin-top: 14px;
        padding: 11px;
        border-radius: 6px 6px 6px 6px;
        width: 100%;

        .refresh {
            margin-right: 10px;
            width: 16px;
            height: 16px;
            /* 使用 "~" 作为前缀可以更好地解析静态资源的路径 */
            background-size: 16px 16px;
            background-repeat: no-repeat;
        }
    }

    .modern-pagination {
        margin: 30px 0 20px;

        .pagination-container {
            flex-wrap: wrap;
            justify-content: center;
            padding: 16px;
            border-radius: 16px;

            .pagination-btn {
                .btn-text {
                    display: none;
                }
            }

            .page-numbers {
                order: -1;
                margin: 0 0 12px 0;

                .page-btn {
                    min-width: 32px;
                    height: 32px;
                    border-radius: 16px;
                    font-size: 13px;
                }
            }

            .page-info {
                order: 1;
                margin: 12px 0 0 0;
                padding: 0;
                border: none;
                text-align: center;
                width: 100%;
                font-size: 12px;
            }
        }
    }

}
</style>